<template>
  <div class="shell">
    <div class="top" style="margin-top:45px;"></div>
    <form onsubmit="return false">
      <div class="form-item">
        <label>用户名</label>
        <div class="input-wrapper">
          <input type="text" id="username" v-model="userForm.username" autocomplete="off" autocorrect="off"
            autocapitalize="off" spellcheck="false" data-lpignore="true" />
        </div>
      </div>
      <div class="form-item">
        <label>密码</label>
        <div class="input-wrapper">
          <input type="password" v-model="userForm.password" id="password" autocomplete="off" autocorrect="off"
            autocapitalize="off" spellcheck="false" data-lpignore="true" />
          <button type="button" id="eyeball">
            <div class="eye"></div>
          </button>
          <div id="beam"></div>
        </div>
      </div>
      <div class="form-item" style="display:flex;align-items:center;justify-content:flex-start;">
        <label style="margin:10px 10px 0 0;">性别</label>
        <el-radio-group v-model="userForm.sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </div>
      <div class="form-item">
        <label>手机号码</label>
        <div class="input-wrapper">
          <input type="text" id="username" v-model="userForm.phone" autocomplete="off" autocorrect="off"
            autocapitalize="off" spellcheck="false" data-lpignore="true" />
        </div>
      </div>
      <div class="form-item">
        <label>上传头像</label>
        <div style="display:flex;justify-content:center;">
          <el-upload class="avatar-uploader" :action="$baseUrl + '/user/uploadPic'" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
            style="border:thin solid lightblue;width:100px;height:100px;line-height: 100px;">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div style="display:flex;justify-content:center;">
        <button id="submit" @click="submit">Register</button>
      </div>
    </form>
  </div>
</template>

<script>
import { register } from '@/request/api.js'
export default {
  data() {
    return ({
      userForm: {
        username: '',
        password: '',
        sex: '',
        phone: '',
      },
      imageUrl: '',
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    submit() {
      if (this.userForm.username == '' || this.userForm.password == '') {
        this.$message.warning('请完善信息')
        return
      }
      register(this.userForm).then(res => {
        if (res.code == 10001) {
          localStorage.setItem('isNewUser',true)
          this.$message.success(res.message)
          this.$router.push("/")
        }else{
          this.$message.warning(res.message)
          this.userForm = {
              username: '',
              password: '',
              sex: '',
              phone: '',
            }
        }
      })
    },
    init() {
      const root = document.documentElement;
      const eye = document.getElementById('eyeball');
      const beam = document.getElementById('beam');
      const passwordInput = document.getElementById('password');
      const footer = document.querySelector('.shell-main-footer')
      const shell = document.querySelector('.shell')
      let flag = false

      root.addEventListener('mousemove', (e) => {
        let rect = beam.getBoundingClientRect();
        let mouseX = rect.right + (rect.width / 2);
        let mouseY = rect.top + (rect.height / 2);
        let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY);
        let degrees = (rad * (20 / Math.PI) * -1) - 350;
        root.style.setProperty('--beamDegrees', `${degrees}deg`);
      });

      eye.addEventListener('click', e => {
        e.preventDefault();
        flag = !flag
        if (flag) {
          shell.style.backgroundColor = 'black'
        } else {
          shell.style.backgroundColor = 'white'
        }
        document.body.classList.toggle('show-password');
        passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password'
        passwordInput.focus();

      });


    },
    handleAvatarSuccess(res, file) {
      if (res.code == 20002) {
        this.$message({
          type: 'success',
          message: res.message
        })
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
@import url(./css/all.css);

::v-deep .el-radio__label {
  font-size: 18px;
}

.avatar-uploader-icon[data-v-006f7b36] {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;

}

::v-deep .el-input__inner {
  background-color: white !important;
  ;
  /* border: thin solid black; */
  color: white !important;
}

.top {
  margin: 40px 0 10px 0;
}

body .shell-main-nav ul .nav-box {
  left: 480px;
}

:root {
  --bgColor: white;
  --inputColor: black;
  --outlineColor: rgb(141, 228, 41);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bgColor);
}

body.show-password {
  --bgColor: rgba(0, 0, 0, 0.9);
  --inputColor: white;
  --outlineColor: rgb(151, 247, 218);
}

form {
  transform: translate3d(0, 0, 0);
  padding: 10px;
}

form>*+* {
  margin-top: 10px;
}

.form-item>*+* {
  margin-top: 0.5rem;
}

label,
input,
button {
  font-size: 1.5rem;
  font-family: monospace;
  color: var(--inputColor);
}

label:focus,
input:focus,
button:focus {
  outline: 3px solid var(--outlineColor);
  outline-offset: 2px;
}

label::-moz-focus-inner,
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
}

label[id=password],
input[id=password],
button[id=password] {
  color: black;
}

button {
  border: none;
}

[id=submit] {
  cursor: pointer;
  margin: 20px 0 0 2px;
  padding: 0.75rem 1.25rem;
  color: var(--bgColor);
  background-color: var(--inputColor);
  box-shadow: 4px 4px 0 rgba(30, 144, 255, 0.2);
}

[id=submit]:active {
  transform: translateY(1px);
}

.input-wrapper {
  position: relative;
}

input {
  padding: 0.75rem 4rem 0.75rem 0.75rem;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px black, inset 6px 6px 0 rgba(30, 144, 255, 0.2), 3px 3px 0 rgba(30, 144, 255, 0.2);
  -webkit-appearance: none;
}

input:focus {
  outline-offset: 1px;
}

.show-password input {
  box-shadow: inset 0 0 0 2px black;
  border: 2px dashed white;
}

.show-password input:focus {
  outline: none;
  border-color: rgb(151, 247, 218);
}

[id=eyeball] {
  --size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  border: none;
  background-color: transparent;
  transform: translateY(-50%);
}

[id=eyeball]:active {
  transform: translateY(calc(-50% + 1px));
}

.eye {
  width: var(--size);
  height: var(--size);
  border: 2px solid black;
  border-radius: calc(var(--size) / 1.5) 0;
  transform: rotate(45deg);
}

.eye:before,
.eye:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 100%;
}

.eye:before {
  width: 35%;
  height: 35%;
  background-color: black;
}

.eye:after {
  width: 65%;
  height: 65%;
  border: 2px solid black;
  border-radius: 100%;
}

[id=beam] {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  -webkit-clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  width: 100vw;
  height: 25vw;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: transform 200ms ease-out;
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(var(--beamDegrees, 0));
  pointer-events: none;
}

.show-password [id=beam] {
  background: rgb(151, 247, 218);
}

body .shell-main-footer {
  position: absolute;
  bottom: 100px;
}

body .shell {
  min-height: 100vh;
  position: relative
}

body .shell-main-footer {
  height: 70px;
}
</style>